<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="search">
		<uni-search-bar placeholder="请输入货品名称/货品编号/货品类别" @confirm="search"></uni-search-bar>
		<view>

			<uni-section>
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<view v-if="current === 0">
						<view class="qq" v-for="(item,index) in qq" :key="index">

							<view class="content-text">
								<view class="item">图片</view>
							</view>
							<view class="text_a">
								<span>货品名称：{{item.Goods_name}}</span><br>
								<span>货品编号：{{item.Goods_number}}</span><br>
								<span>货品颜色：{{item.Goods_colour}}</span><br>
								<span>货品尺码：{{item.Goods_size}}</span><br>
								<span>入库数量：{{item.Goods_total}}</span><br>
							</view>
							<view class="text_b">供货商姓名：{{item.Goods_supplier}}</view>
							<view class="text_c">上架时间：{{item.Goods_time}}</view>

							<view class="text_d">编辑</view>
							<view class="text_e">复制上架</view>
						</view>
					</view>

					<view v-if="current === 1">
						<view class="qq" v-for="(item,index) in ruku(qq)" :key="index">
							<view class="content-text">图片</view>
							<view @click="think_fn(index)" class="text_a">
								<span>货品名称：{{item.Goods_name}}</span><br>
								<span>货品编号：{{item.Goods_number}}</span><br>
								<span>货品颜色：{{item.Goods_colour}}</span><br>
								<span>货品尺码：{{item.Goods_size}}</span><br>
								<span>入库数量：{{item.Goods_total}}</span><br>
							</view>
							<view class="text_b">供货商姓名：{{item.Goods_supplier}} </view>
							<view class="text_c">上架时间：{{item.Goods_time}}</view>
							</text>
							<view @click="tiao_fn(index)" class="text_d">编辑</view>
							<view class="text_e">复制上架</view>
							<view class="text_f" type="primary" @click="toggle(index)">补货</view>
						</view>
					</view>
					<view v-if="current === 2">
						<view class="qq" v-for="(item,index) in chuku (qq)" :key="index">
							<view class="content-text">图片</view>
							<view class="text_a">
								<span>货品名称：{{item.Goods_name}}</span><br>
								<span>货品编号：{{item.Goods_number}}</span><br>
								<span>货品颜色：{{item.Goods_colour}}</span><br>
								<span>货品尺码：{{item.Goods_size}}</span><br>
								<span>入库数量：{{item.Goods_total}}</span><br>
							</view>
							<view class="text_b">客户姓名：{{item.Goods_supplier}} </view>
							<view class="text_c">出库时间：{{item.Goods_time}}</view>
							</text>
							<view class="text_aa" @click="zai_fn(item.Goods_id)">再次入库</view>


						</view>
					</view>
				</view>
			</uni-section>

		</view>

		<view :style='{"display": look}' ref="kuang"
			style="position: fixed; z-index: 1; top:40px; width:100%; background-color: rgba(10 , 10 , 10 , 0.6);">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="popup">
					<view class="text_bbb">请输入补货数量</view>
					<view class="text_ccc" @click="queding()">关闭</view>
				</view>
				<view class="text_bb1">货品名称: {{buhuo.Goods_name}} </view>
				<view class="text_bb1">货品编号: {{buhuo.Goods_number}}</view>
				<view class="popup_a">
					<uni-section <uni-number-box @change="changeValue" />
					</uni-section>
				</view>
				<view class="popup_b" @click="queding(buhuo)">确定</view>
			</view>
		</view>


	</view>


</template>
<script>
	export default {
		components: {},
		data() {
			return {
				current_qty:'',
				tmp_arr: [],
				ww: '',
				buhuo: '',
				qq: '',
				zai:'block',
				look: "none",
				looks: {
					display: "none"
				},
				type: 'center',
				items: ['入库流水', '已入库', '已出库'],
				styles: [{
					value: 'button',
					text: '按钮',
					checked: true
				}],
				current: 0,
				colorIndex: 0,
				activeColor: '#fccc04',
				styleType: 'button',
				show: false
			}
		},
		onReady() {},
		methods: {
			ruku(cc) {
				var tmp_arr = []
				for (var i = 0; i < cc.length; i++) {
					if (cc[i].Goods_status == "1") {
						tmp_arr.push(cc[i])
					}
				}
				console.log("入库结果");
				console.log(tmp_arr)
				this.ww = JSON.stringify(tmp_arr[0])
				this.vv = JSON.stringify(tmp_arr[0])
				this.tmp_arr = tmp_arr
				// console.log(this.ww)
				return tmp_arr
			},
			chuku(cc) {
				var tmp_arr = []
				for (var i = 0; i < cc.length; i++) {
					if (cc[i].Goods_status == "2") {
						tmp_arr.push(cc[i])
					}
				}
				console.log("出库结果");
				console.log(tmp_arr);
				return tmp_arr
			},
			queding(cc) {
				
				console.log(cc);
				uni.request({
					url:'http://localhost:3000/define',
					data:{
						id:cc.Goods_id,
						num:(cc.Goods_total-0)+(this.current_qty-0)
					},
					success: (res) => {
						console.log(res.data);
					}
				})
				location.reload()
				this.look = "none"
				this.$set(this.looks, "display", "none")

			},
			changeValue(value) {
				console.log('返回数值：', value);
				this.current_qty=value
			},
			change(e) {
				this.show = e.show
			},
			toggle(aa) {
				console.log("4444");
				this.look = "block"
				this.looks.display = "block"
				this.buhuo = this.tmp_arr[aa]
				console.log(this.buhuo);
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			tiao_fn(aa) {
				uni.navigateTo({
					url: '../goods/goods?id=' + encodeURIComponent(JSON.stringify(this.tmp_arr[aa])),

				})
			},
			think_fn(aa) {
				console.log(this.tmp_arr[aa]);
				uni.navigateTo({
					url: '../kinds/kinds?id=' + encodeURIComponent(JSON.stringify(this.tmp_arr[aa])),
				})
			},
			zai_fn(cc){
				console.log(cc);
				uni.request({
					url:'http://localhost:3000/gaibian',
					data:{
						id:cc
					},
					success: (res) => {
						console.log(res.data);
					}
				})
				location.reload()
			}
		},
		mounted() {
			uni.request({
				url: 'http://localhost:3000/good', //仅为示例，并非真实接口地址。
				success: (res) => {
					// console.log(res.data);
					this.qq = res.data.data
					// console.log(this.qq);
				}
			});
		}
	}
</script>

<style>
	.popup {
		width: 100%;
		height: 40px;
		background-color: #f6f6f6;
	}

	.popup_a {
		width: 150px;
		height: 35px;
		margin-left: 140px;
	}

	.popup_b {
		width: 150px;
		height: 40px;
		background-color: #fccc04;
		margin-left: 110px;
		line-height: 40px;
		text-align: center;
		font-size: 20px;
		letter-spacing: 5px;
	}

	.text_bbb {
		padding-top: 5px;
		font-size: 15px;
		color: black;
		line-height: 30px;

	}

	.text_bb1 {
		margin-left: 20px;
		font-size: 15px;
		color: white;
		line-height: 30px;
		letter-spacing: 3px;
	}

	.text_ccc {
		width: 90px;
		height: 20px;
		margin-left: 260px;
		margin-top: -25px;
		font-size: 15px;
		line-height: 20px;
		text-align: right;
	}

	.content {
		height: 470px;
		overflow: scroll;
	}

	.popup-content {
		height: 200px;
	}

	.content-text {
		width: 90px;
		height: 90px;
		background-color: orchid;
		margin-left: 15px;
		font-size: 20px;
		margin-top: 20px;
		color: #666;
	}

	.text_a {
		width: 200px;
		height: 110px;
		margin-left: 115px;
		margin-top: -100px;
		font-size: 15px;
	}

	.text_b {
		width: 350px;
		height: 30px;
		margin: 10px;
		border: 2px dashed #f6f6f6;
		font-size: 16px;
		color: black;
		line-height: 30px;
	}

	.text_c {
		margin-left: 220px;
		margin-top: -36px;
		font-size: 13px;

	}

	.text_d {
		width: 55px;
		height: 25px;
		background-color: yellow;
		margin: 20px;
		margin-left: 200px;
		text-align: center;
		line-height: 25px;
		border-radius: 3px;
		font-size: 13px;
	}

	.text_e {
		width: 70px;
		height: 25px;
		background-color: #fccc04;
		margin-left: 270px;
		border-radius: 3px;
		margin-top: -45px;
		text-align: center;
		line-height: 25px;
		font-size: 13px;
	}

	.text_f {
		width: 55px;
		height: 25px;
		background-color: white;
		margin-left: 130px;
		line-height: 25px;
		text-align: center;
		border: 1px solid yellow;
		border-radius: 3px;
		margin-top: -25px;
		font-size: 13px;
	}

	.text_aa {
		width: 70px;
		height: 25px;
		background-color: #fccc04;
		margin: 10px;
		margin-left: 280px;
		text-align: center;
		line-height: 25px;
		border-radius: 3px;
		font-size: 13px;
	}
</style>
